<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 1212px;
            margin: 50px auto;
            background-color: #e8e7e3;
            overflow: hidden;
        }

        .nav li {
            float: left;
            line-height: 49px;  /*这里可以使用高度来代替行高*/
            /* height: 49px; */
            margin-right: 76px;
        }

        .nav li:first-child {
            margin-left: 36px;
        }

        .nav a {
            /*  */
            display: block;  /* 为什么这样操作呢？ 因为a是行内元素当我们点击li的其他周围不会点击到a
            这时候要让a和li的宽高一样 a是行内元素要转化为块级元素才能设置高宽
            ，因为li设置了行高，行高是可以继承的，所以a的默认高度和li一样，又因为块级元素的宽度默认和父元素一样
            所以宽度和父元素一样 */
            text-decoration: none;
            color: #b1b1af;
            font-size: 17px;


        }
    </style>
</head>

<body>
    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>
    </ul>






   
   
    
  
   
    

































</body>








</html>